<template>
  <div class="bread">
    <el-card>
      <p>
        <span></span>
        <span v-for="(item, index) in breadList" :key="index">{{ item }}</span>
      </p></el-card
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      breadList: [],
    };
  },
  mounted() {
    this.breadList = this.$route.meta.bread;
  },
};
</script>
<style lang="scss" scoped>
.el-card__body{
  padding: 0 !important;
  // padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.bread {
  width: 100%;
  height: 100%;
  p {
    width: 100%;
    height: 50px;
    line-height: 50px;
    span:nth-child(1) {
      display: inline-block;
      width: 2px;
      height: 15px;
      background-color: #31c17b;
      margin-right: 10px;
    }
    span:nth-child(2) {
      font-size: 18px;
    }
  }
}
</style>
